<template>
  <div>

    <el-button type="primary" @click="newUserFlag = true" style="margin-bottom: 25px">添加角色</el-button>
    <el-dialog
      title="提示"
      :visible.sync="newUserFlag"
      width="50%">
      <addRole ref="mychild"></addRole>
    </el-dialog>
    <el-table :data="tableData" :row-style="rowStyle" border>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="description" label="角色描述"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" icon="el-icon-position" @click="pzRoute(scope.row)">配置路由</el-button>
          <el-button @click="changeClick(scope.row)" size="mini" type="warning" icon="el-icon-edit">修改角色</el-button>
          <el-button @click="delUser(scope.row)" type="danger" size="small" icon="el-icon-delete">删除路由</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      style="float: right;margin: 20px 150px;"
      :total="page.tatol"
    ></el-pagination>
    <el-dialog title="配置路由" :visible.sync="routeFlag" width="30%">
      <el-select v-model="routeItem" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.permissionName"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-plus" @click="pushChange">添加</el-button>
      <ul>
        <li style="width: 50%;" v-for="(item, index) in routeList" :key="index">
          {{item}}
          <span @click="delItem(index)" style="cursor: pointer;float:right;color:red;">删除</span>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="routeFlag = false">取 消</el-button>
        <el-button type="primary" @click="getNewRote">配 置</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改角色" :visible.sync="changeFlag" width="30%">
      <el-row style="margin-top: 20px;">
        <el-col :span="12">
          角色名称：
          <el-input v-model="change.roleName" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
        <el-col :span="12">
          角色描述：
          <el-input v-model="change.description" placeholder="请输入内容" style="width:50%"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeFlag = false">取 消</el-button>
        <el-button type="primary" @click="getChange">修  改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
import addRole from '@/components/addRole'
export default {
  data () {
    return {
      tableData: [],
      page: {
        pageSize: 10,
        pageNo: 1,
        tatol: 0
      },
      routeFlag: false,
      options: [],
      routeList: [],
      routeItem: '',
      userRote: {
        roleId: '',
        permissionIdList: []
      },
      newUserFlag: false,
      change: {},
      changeFlag: false
    }
  },
  components: {
    addRole: addRole
  },
  methods: {
    handleSizeChange (val) {
      this.page.pageSize = val
      this.search()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.search()
    },
    rowStyle (row) {
      // console.log(row)
      if (row.rowIndex % 2 === 0) {
        return 'background: #ccc'
      }
    },
    pzRoute (row) {
      this.routeFlag = true
      this.userRote.roleId = row.id
      request({
        url: '/admin/permission/findRolePermissionByRoleId',
        method: 'get',
        params: {
          roleId: row.id
        }
      }).then(res => {
        if (res.code === '00000000') {
          // console.log(res)

          for (let i = 0; i < res.data.length; i++) {
            this.userRote.permissionIdList.push(res.data[i])
            for (let j = 0; j < this.options.length; j++) {
              if (res.data[i] === this.options[j].id) {
                // console.log(this.options[i])
                this.routeList.push(this.options[i].permissionName)
              }
            }
          }
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    search () {
      request({
        url: '/admin/role/findRoleByPage',
        method: 'get',
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
          isDelete: 0
        }
      }).then(res => {
        if (res.code === '00000000') {
          this.tableData = res.data.data
          this.page.tatol = parseInt(res.data.totalCount)
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    delItem (index) {
      this.routeList.splice(index, 1)
      this.userRote.permissionIdList.splice(index, 1)
      console.log(this.routeList, this.userRote.permissionIdList)
    },
    pushChange () {
      if (!this.routeItem) {
        Message({
          message: '不能添加空！',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }
      for (let j = 0; j < this.userRote.permissionIdList.length; j++) {
        if (this.routeItem === this.userRote.permissionIdList[j]) {
          Message({
            message: '已存在！',
            type: 'error',
            duration: 5 * 1000
          })
          return
        }
      }
      for (let i = 0; i < this.options.length; i++) {
        if (this.routeItem === this.options[i].id) {
          this.routeList.push(this.options[i].permissionName)
        }
      }
      this.userRote.permissionIdList.push(this.routeItem)
      this.routeItem = ''
    },
    getNewRote () {
      request({
        url: '/admin/permission/addRolePermission',
        method: 'post',
        data: this.userRote
      }).then(res => {
        if (res.code === '00000000') {
          Message({
            message: res.message,
            type: 'success',
            duration: 5 * 1000
          })
          this.routeFlag = false
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    changeClick (row) {
      this.change = row
      this.changeFlag = true
    },
    getChange () {
      request({
        url: '/admin/role/updateRole',
        method: 'post',
        data: {
          description: this.change.description,
          roleName: this.change.roleName,
          isDelete: 0,
          id: this.change.id
        }
      }).then(res => {
        if (res.code === '00000000') {
          Message({
            message: res.message,
            type: 'success',
            duration: 5 * 1000
          })
          this.search()
          this.changeFlag = false
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    delUser (row) {
      this.$confirm('确认删除？')
        .then(_ => {
          request({
            url: '/admin/role/updateRole',
            method: 'post',
            data: {
              description: row.description,
              roleName: row.roleName,
              isDelete: 1,
              id: row.id
            }
          }).then(res => {
            if (res.code === '00000000') {
              Message({
                message: res.message,
                type: 'success',
                duration: 5 * 1000
              })
              this.search()
            } else {
              Message({
                message: res.message,
                type: 'error',
                duration: 5 * 1000
              })
            }
          })
        })
        .catch(_ => {})
    }
  },
  created () {
    this.search()
    request({
      url: '/admin/permission/findPermissionByPage',
      method: 'get',
      params: {
        pageNo: 1
      }
    }).then(res => {
      if (res.code === '00000000') {
        this.options = res.data.data
      }
    })
  },
  watch: {
    routeFlag (val) {
      if (!val) {
        this.userRote = {
          roleId: '',
          permissionIdList: []
        }
        this.routeList = []
        this.routeItem = ''
      }
    },
    newUserFlag (val) {
      if (!val) {
        this.$refs.mychild.remove()
        this.search()
      }
    },
    changeFlag (val) {
      if (!val) {
        this.search()
      }
    }
  }
}
</script>

<style>
.el-dialog__footer {
  text-align: center;
}
</style>
